<template>
	<view class="monitor-container">
		<!-- 顶部统计 -->
		<view class="stats-section">
			<view class="stats-header">
				<text class="stats-title">流程监控</text>
				<view class="stats-actions">
					<view class="action-btn" @click="refreshData">
						<text class="iconfont icon-refresh"></text>
					</view>
					<view class="action-btn" @click="showSettings">
						<text class="iconfont icon-cog"></text>
					</view>
				</view>
			</view>

			<!-- 关键指标 -->
			<view class="stats-grid">
				<view class="stat-card">
					<view class="stat-content">
						<view class="stat-info">
							<text class="stat-number">{{ keyMetrics.processingCount }}</text>
							<text class="stat-label">处理中车辆</text>
						</view>
						<text class="iconfont icon-car stat-icon"></text>
					</view>
				</view>
				<view class="stat-card">
					<view class="stat-content">
						<view class="stat-info">
							<text class="stat-number">{{ keyMetrics.alertCount }}</text>
							<text class="stat-label">待处理预警</text>
						</view>
						<text class="iconfont icon-exclamation stat-icon"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 状态分布图表 -->
		<view class="chart-section">
			<view class="section-header">
				<text class="section-title">车辆状态分布</text>
				<text class="section-link">实时更新</text>
			</view>
			<view class="chart-list">
				<view class="chart-item" v-for="(item, index) in statusDistribution" :key="index">
					<view class="chart-info">
						<view class="chart-dot" :class="item.color"></view>
						<text class="chart-label">{{ item.name }}</text>
					</view>
					<view class="chart-bar">
						<view class="bar-container">
							<view class="bar-fill" :class="item.color" :style="{ width: item.percentage + '%' }"></view>
						</view>
						<text class="bar-value">{{ item.count }}辆</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 实时监控 -->
		<view class="monitor-section">
			<view class="section-header">
				<text class="section-title">实时监控</text>
				<view class="status-indicator">
					<view class="status-dot"></view>
					<text class="status-text">系统正常</text>
				</view>
			</view>
			<view class="monitor-grid">
				<view class="monitor-item" v-for="(item, index) in monitorMetrics" :key="index">
					<view class="monitor-card" :class="item.cardClass">
						<text class="monitor-number" :class="item.numberClass">{{ item.value }}</text>
						<text class="monitor-label">{{ item.label }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 预警监控 -->
		<view class="alerts-section">
			<view class="section-header">
				<text class="section-title">预警监控</text>
				<text class="alert-count">{{ alerts.length }}条预警</text>
			</view>
			<view class="alerts-list">
				<view class="alert-item" v-for="(alert, index) in alerts" :key="index" :class="alert.type">
					<view class="alert-icon" :class="alert.iconClass">
						<text class="iconfont" :class="alert.icon"></text>
					</view>
					<view class="alert-content">
						<text class="alert-title">{{ alert.title }}</text>
						<text class="alert-desc">{{ alert.description }}</text>
					</view>
					<text class="alert-priority" :class="alert.priorityClass">{{ alert.priority }}</text>
				</view>
			</view>
		</view>

		<!-- 处理效率 -->
		<view class="efficiency-section">
			<view class="section-header">
				<text class="section-title">处理效率</text>
				<text class="section-link">本周数据</text>
			</view>
			<view class="efficiency-list">
				<view class="efficiency-item" v-for="(item, index) in efficiencyMetrics" :key="index">
					<view class="efficiency-icon" :class="item.iconClass">
						<text class="iconfont" :class="item.icon"></text>
					</view>
					<view class="efficiency-content">
						<text class="efficiency-label">{{ item.label }}</text>
					</view>
					<text class="efficiency-value" :class="item.valueClass">{{ item.value }}</text>
				</view>
			</view>
		</view>

		<!-- 快速操作 -->
		<!--    <view class="action-section">
      <view class="action-grid">
        <button class="action-btn export-btn" @click="exportReport">
          <text class="iconfont icon-download"></text>
          <text class="btn-text">导出报告</text>
        </button>
        <button class="action-btn alert-btn" @click="setAlerts">
          <text class="iconfont icon-bell"></text>
          <text class="btn-text">设置预警</text>
        </button>
      </view>
    </view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'

	// 响应式数据
	const keyMetrics = reactive({
		processingCount: 156,
		alertCount: 8
	})

	const statusDistribution = ref([{
			name: '采购中',
			count: 12,
			percentage: 25,
			color: 'blue-dot'
		},
		{
			name: '检测中',
			count: 8,
			percentage: 15,
			color: 'yellow-dot'
		},
		{
			name: '过户中',
			count: 15,
			percentage: 30,
			color: 'green-dot'
		},
		{
			name: '待出口',
			count: 23,
			percentage: 35,
			color: 'purple-dot'
		},
		{
			name: '运输中',
			count: 10,
			percentage: 20,
			color: 'orange-dot'
		}
	])

	const monitorMetrics = ref([{
			value: '98%',
			label: '系统可用性',
			cardClass: 'monitor-green',
			numberClass: 'green-number'
		},
		{
			value: '2.3s',
			label: '平均响应时间',
			cardClass: 'monitor-blue',
			numberClass: 'blue-number'
		},
		{
			value: '1,234',
			label: '今日处理量',
			cardClass: 'monitor-purple',
			numberClass: 'purple-number'
		},
		{
			value: '15',
			label: '在线用户',
			cardClass: 'monitor-orange',
			numberClass: 'orange-number'
		}
	])

	const alerts = ref([{
			title: '检测超时预警',
			description: '3辆车检测超过24小时',
			type: 'urgent',
			priority: '紧急',
			priorityClass: 'urgent-priority',
			icon: 'icon-exclamation',
			iconClass: 'urgent-icon'
		},
		{
			title: '过户延期预警',
			description: '5辆车过户资料不齐',
			type: 'warning',
			priority: '注意',
			priorityClass: 'warning-priority',
			icon: 'icon-clock',
			iconClass: 'warning-icon'
		},
		{
			title: '物流延迟预警',
			description: '2辆车物流信息异常',
			type: 'info',
			priority: '提醒',
			priorityClass: 'info-priority',
			icon: 'icon-ship',
			iconClass: 'info-icon'
		}
	])

	const efficiencyMetrics = ref([{
			label: '平均处理时长',
			value: '3.2天',
			icon: 'icon-car',
			iconClass: 'blue-icon',
			valueClass: 'normal-value'
		},
		{
			label: '完成率',
			value: '94.5%',
			icon: 'icon-check-circle',
			iconClass: 'green-icon',
			valueClass: 'success-value'
		},
		{
			label: '异常率',
			value: '2.1%',
			icon: 'icon-exclamation-triangle',
			iconClass: 'orange-icon',
			valueClass: 'warning-value'
		},
		{
			label: '活跃用户',
			value: '15人',
			icon: 'icon-users',
			iconClass: 'purple-icon',
			valueClass: 'normal-value'
		}
	])

	// 方法
	const refreshData = () => {
		uni.showToast({
			title: '数据刷新中...',
			icon: 'loading'
		})
		// 这里可以调用API刷新数据
		setTimeout(() => {
			uni.showToast({
				title: '数据已更新',
				icon: 'success'
			})
		}, 1000)
	}

	const showSettings = () => {
		uni.navigateTo({
			url: '/pages/settings/settings'
		})
	}

	const exportReport = () => {
		uni.showToast({
			title: '报告导出中...',
			icon: 'loading'
		})
		setTimeout(() => {
			uni.showToast({
				title: '报告已导出',
				icon: 'success'
			})
		}, 2000)
	}

	const setAlerts = () => {
		uni.navigateTo({
			url: '/pages/alerts/alerts'
		})
	}

	// 生命周期
	onMounted(() => {
		loadMonitorData()
	})

	const loadMonitorData = () => {
		// 这里可以调用API获取监控数据
		console.log('加载监控数据')
	}
</script>

<style scoped>
	.monitor-container {
		background-color: #f8fafc;
		min-height: 100vh;
	}

	.stats-section {
		background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
		color: white;
		padding: 24px;
	}

	.stats-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
	}

	.stats-title {
		font-size: 20px;
		font-weight: bold;
	}

	.stats-actions {
		display: flex;
		gap: 12px;
	}

	.action-btn {
		width: 32px;
		height: 32px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stats-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.stat-card {
		background: rgba(255, 255, 255, 0.2);
		border-radius: 12px;
		padding: 16px;
	}

	.stat-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.stat-info {
		display: flex;
		flex-direction: column;
	}

	.stat-number {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 4px;
	}

	.stat-label {
		font-size: 12px;
		opacity: 0.8;
	}

	.stat-icon {
		font-size: 24px;
		opacity: 0.8;
	}

	.chart-section,
	.monitor-section,
	.alerts-section,
	.efficiency-section {
		background: white;
		margin: 16px;
		border-radius: 12px;
		padding: 16px;
		/* box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1); */
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #1f2937;
	}

	.section-link {
		font-size: 14px;
		color: #3b82f6;
	}

	.alert-count {
		font-size: 14px;
		color: #ef4444;
	}

	.status-indicator {
		display: flex;
		align-items: center;
	}

	.status-dot {
		width: 8px;
		height: 8px;
		background: #10b981;
		border-radius: 50%;
		margin-right: 8px;
	}

	.status-text {
		font-size: 12px;
		color: #10b981;
	}

	.chart-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.chart-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.chart-info {
		display: flex;
		align-items: center;
	}

	.chart-dot {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		margin-right: 12px;
	}

	.blue-dot {
		background: #3b82f6;
	}

	.yellow-dot {
		background: #f59e0b;
	}

	.green-dot {
		background: #10b981;
	}

	.purple-dot {
		background: #8b5cf6;
	}

	.orange-dot {
		background: #f97316;
	}

	.chart-label {
		font-size: 14px;
		color: #6b7280;
	}

	.chart-bar {
		display: flex;
		align-items: center;
	}

	.bar-container {
		width: 96px;
		height: 8px;
		background: #e5e7eb;
		border-radius: 4px;
		margin-right: 12px;
		overflow: hidden;
	}

	.bar-fill {
		height: 100%;
		border-radius: 4px;
		transition: width 0.3s ease;
	}

	.bar-fill.blue-dot {
		background: #3b82f6;
	}

	.bar-fill.yellow-dot {
		background: #f59e0b;
	}

	.bar-fill.green-dot {
		background: #10b981;
	}

	.bar-fill.purple-dot {
		background: #8b5cf6;
	}

	.bar-fill.orange-dot {
		background: #f97316;
	}

	.bar-value {
		font-size: 14px;
		font-weight: 500;
	}

	.monitor-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.monitor-item {
		text-align: center;
	}

	.monitor-card {
		padding: 16px;
		border-radius: 8px;
	}

	.monitor-green {
		background: #f0fdf4;
	}

	.monitor-blue {
		background: #eff6ff;
	}

	.monitor-purple {
		background: #faf5ff;
	}

	.monitor-orange {
		background: #fff7ed;
	}

	.monitor-number {
		font-size: 24px;
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
	}

	.green-number {
		color: #10b981;
	}

	.blue-number {
		color: #3b82f6;
	}

	.purple-number {
		color: #8b5cf6;
	}

	.orange-number {
		color: #f97316;
	}

	.monitor-label {
		font-size: 12px;
		color: #6b7280;
	}

	.alerts-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.alert-item {
		display: flex;
		align-items: center;
		padding: 12px;
		border-radius: 8px;
	}

	.alert-item.urgent {
		background: #fef2f2;
		border-left: 4px solid #ef4444;
	}

	.alert-item.warning {
		background: #fffbeb;
		border-left: 4px solid #f59e0b;
	}

	.alert-item.info {
		background: #f0f9ff;
		border-left: 4px solid #0ea5e9;
	}

	.alert-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.urgent-icon {
		background: #fee2e2;
		color: #ef4444;
	}

	.warning-icon {
		background: #fef3c7;
		color: #f59e0b;
	}

	.info-icon {
		background: #e0f2fe;
		color: #0ea5e9;
	}

	.alert-content {
		flex: 1;
	}

	.alert-title {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
		display: block;
		margin-bottom: 2px;
	}

	.alert-desc {
		font-size: 12px;
		color: #6b7280;
		display: block;
	}

	.alert-priority {
		font-size: 12px;
	}

	.urgent-priority {
		color: #ef4444;
	}

	.warning-priority {
		color: #f59e0b;
	}

	.info-priority {
		color: #0ea5e9;
	}

	.efficiency-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.efficiency-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.efficiency-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.blue-icon {
		background: #dbeafe;
		color: #3b82f6;
	}

	.green-icon {
		background: #dcfce7;
		color: #10b981;
	}

	.orange-icon {
		background: #fed7aa;
		color: #f97316;
	}

	.purple-icon {
		background: #f3e8ff;
		color: #8b5cf6;
	}

	.efficiency-content {
		flex: 1;
	}

	.efficiency-label {
		font-size: 14px;
		color: #6b7280;
	}

	.efficiency-value {
		font-size: 14px;
		font-weight: 500;
	}

	.normal-value {
		color: #1f2937;
	}

	.success-value {
		color: #10b981;
	}

	.warning-value {
		color: #f59e0b;
	}

	.action-section {
		padding: 16px;
	}

	.action-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.action-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16px;
		border-radius: 8px;
		border: none;
		gap: 8px;
	}

	.export-btn {
		background: #3b82f6;
		color: white;
	}

	.alert-btn {
		background: #10b981;
		color: white;
	}

	.btn-text {
		font-size: 14px;
		font-weight: 500;
	}
</style>